<template>
    <div class="moment-list-comp">
        <div class="moment-list" v-if="moments.length > 0">
            <Moment v-for="(item,index) in moments" :key="index" :moment="item"/>
            <div v-if="moments.length > params.pageSize">
                <div v-if="flag" class="moment-more" @click="clickMore">点击加载更多</div>
                <div v-else class="moment-more">已经到底啦!</div>
            </div>
        </div>
        <el-empty v-else description="该用户暂未发表任何文章"/>
    </div>
</template>

<script>
    import Moment from "@/components/Moment"

    import {listMoment} from "@/api/common/common"


    export default {
        name: 'MomentList',
        data() {
            return {
                moments: [],
                params: {
                    account: "",
                    pageNum: 1,
                    pageSize: 2,
                },
                total: 0,
                flag: true, //true:表示还有数据,false表示没有数据了
            };
        },
        methods: {
            //点击更多,即下一页
            clickMore() {
                if (this.flag) {
                    this.params.pageNum++
                    this.listMoment()
                }
            },
            /**
             * 获取列表
             */
            listMoment() {
                if (this.params.account) {
                    listMoment(this.params).then(res => {
                        this.moments.push(...res.rows)
                        this.total = res.total
                        if (!res.rows || res.rows.length == 0) {
                            this.flag = false
                        }
                    })
                }
            }
        },
        mounted() {
            this.params.account = this.$route.params.id
            this.listMoment()
        },
        components: {
            Moment
        }
    }
</script>

<style scoped lang='less'>
    .moment-list-comp {
        .moment-more:hover {
            color: #E6A23C;
        }

        .moment-more {
            cursor: pointer;
            height: 30px;
            font-size: 13px;
            text-align: center;
            line-height: 30px;
            background-color: #F2F6FC;
            color: #606266;
        }

    }
</style>